<template>
    <!-- 约诊 -->
    <div class="preMak">
        <navBar :titleName="titleName"></navBar>
        <nut-textinput class="up"
                       :clearBtn = "true"
                       label="就诊人"
                       :hasBorder="false"
                       placeholder="选择就诊人"
                       v-model="val1"
        />
        <nut-textinput
                :clearBtn = "true"
                label="预约时间"
                :hasBorder="false"
                placeholder="选择日期"
                v-model="val"
        />

        <nut-button block on-click="clickHandler" style="height: 48px;">
            + 新增病人
        </nut-button>

        <nut-button block shape="circle" style="background-color: #4552ea;border-radius: 5px;width: 95%;
    height: 48px;font-size: 17px;margin-top: 40px;">
            确&nbsp;&nbsp;&nbsp;定
        </nut-button>
    </div>
</template>

<script>
    /* eslint-disable no-console */

    import navBar from '@/components/common/navBar.vue'
    export default {
        name: "preMak",
        components:{
            navBar,
        },
        data(){
            return {
                titleName:'约诊',
                isVisible1:false,
                val: "",
                val1:""
            }
        },
        methods:{
            onFocus:function() {
                console.log("focus事件触发！");
            },
            onBlur:function() {
                console.log("blur事件触发！");
            },
        }
    }
</script>

<style scoped>
    .preMak{
        background-color: #e6e6e6;
        margin-top: 41px;
        width: 100%;
        min-height: 660px;
    }
    .nut-textinput input {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        height: 40px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 14px;
        box-sizing: border-box;
        border-radius: 0px!important;
        border: 1px solid #DDDFE6;
        background-color: '#FFFFFF';
        padding: 0 30px 0 10px;
    }

    .nut-textinput {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        position: relative;
        background-color: white !important;
        padding-left: 15px;
        border-bottom: 0.5px solid #DDDFE6;
    }
    .nut-textinput-label{
        width: 65px!important;
        text-align: -webkit-auto;
    }
    .nut-button.block {
        width: 100%;
        border-radius: 0;
        font-size: 16px;
        margin-top: 20px;
        background: white;
        color: #cccccc;
    }

    .nut-button  circle block{
        background-color: #4552ea;
        border-radius: 5px;
        width: 95%;
        height: 48px;
        font-size: 17px;
        margin-top: 40px;
    }
</style>